<!DOCTYPE html>
<html>
<head>
    <title>Fig. 4.8 Reproduction</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="700" height="420"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // --- Helper function to draw arrows ---
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 8; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Style setup ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '16px sans-serif';
        ctx.textAlign = 'center';

        // --- Draw Figure (a) ---
        const xa_center = 180;

        // Scintillator
        ctx.beginPath();
        ctx.rect(xa_center - 20, 90, 40, 100);
        ctx.stroke();
        ctx.fillText('scintillator', xa_center, 80);

        // Particle beam
        ctx.beginPath();
        drawArrow(ctx, 40, 140, 320, 140);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.fillText('particle', 50, 130);
        ctx.fillText('beam', 50, 150);

        // Photomultiplier tube
        ctx.beginPath();
        // The main body outline
        ctx.moveTo(xa_center - 5, 280); // bottom left of neck
        ctx.lineTo(xa_center - 5, 260); // up left neck
        ctx.quadraticCurveTo(xa_center - 60, 240, xa_center - 40, 190); // left shoulder
        ctx.lineTo(xa_center + 40, 190); // top flat surface
        ctx.quadraticCurveTo(xa_center + 60, 240, xa_center + 5, 260); // right shoulder
        ctx.lineTo(xa_center + 5, 280); // down right neck
        ctx.stroke();
        
        // Label for photomultiplier tube
        ctx.textAlign = 'right';
        ctx.fillText('photomultiplier tube', 310, 280);
        // Arrow for the label
        ctx.beginPath();
        const arrowEndX = xa_center + 10;
        const arrowEndY = 270;
        ctx.moveTo(200, 275); // Start near the text
        ctx.quadraticCurveTo(190, 280, arrowEndX, arrowEndY);
        // Arrowhead
        const angle_pmt_arrow = Math.atan2(5, -30); // Approximate angle of the curve end
        const headlen_pmt = 8;
        ctx.lineTo(arrowEndX - headlen_pmt * Math.cos(angle_pmt_arrow - Math.PI / 6), arrowEndY - headlen_pmt * Math.sin(angle_pmt_arrow - Math.PI / 6));
        ctx.moveTo(arrowEndX, arrowEndY);
        ctx.lineTo(arrowEndX - headlen_pmt * Math.cos(angle_pmt_arrow + Math.PI / 6), arrowEndY - headlen_pmt * Math.sin(angle_pmt_arrow + Math.PI / 6));
        ctx.stroke();
        
        // Small arrow inside PMT
        ctx.beginPath();
        const curveStartX = xa_center + 20;
        const curveStartY = 295;
        const curveEndX = xa_center;
        const curveEndY = 275;
        ctx.moveTo(curveStartX, curveStartY);
        ctx.quadraticCurveTo(curveStartX - 10, curveStartY - 5, curveEndX, curveEndY);
        // Arrowhead
        const angle_inner_arrow = Math.atan2(curveEndY-curveStartY, curveEndX-curveStartX);
        const headlen_inner = 6;
        ctx.lineTo(curveEndX - headlen_inner * Math.cos(angle_inner_arrow - Math.PI / 4), curveEndY - headlen_inner * Math.sin(angle_inner_arrow - Math.PI / 4));
        ctx.moveTo(curveEndX, curveEndY);
        ctx.lineTo(curveEndX - headlen_inner * Math.cos(angle_inner_arrow + Math.PI / 4), curveEndY - headlen_inner * Math.sin(angle_inner_arrow + Math.PI / 4));
        ctx.stroke();


        // Label (a)
        ctx.textAlign = 'center';
        ctx.fillText('(a)', xa_center, 320);

        // --- Draw Figure (b) ---
        const origin = { x: 500, y: 180 };
        const L = 90;
        const theta = Math.PI / 9; // Approx 20 degrees

        // Axes and their labels
        ctx.beginPath();
        drawArrow(ctx, origin.x, origin.y, origin.x + 120, origin.y); // n-axis
        drawArrow(ctx, origin.x, origin.y, origin.x, origin.y - 100); // p'-axis
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.fillText("n", origin.x + 125, origin.y + 5);
        ctx.fillText("p'", origin.x + 5, origin.y - 100);

        // Incoming vector p
        const p_start = {
            x: origin.x - L * Math.cos(theta),
            y: origin.y + L * Math.sin(theta)
        };
        ctx.beginPath();
        drawArrow(ctx, p_start.x, p_start.y, origin.x, origin.y);
        ctx.stroke();
        ctx.fillText("p", origin.x - 55, origin.y - 5);
        ctx.fillText("n", p_start.x - 20, p_start.y + 5);

        // Dashed line
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        const dashed_end = {
            x: origin.x + L * 0.8 * Math.cos(theta),
            y: origin.y - L * 0.8 * Math.sin(theta)
        };
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(dashed_end.x, dashed_end.y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // Angle theta
        ctx.beginPath();
        ctx.arc(origin.x, origin.y, 40, 0, -theta, true);
        ctx.stroke();
        ctx.fillText("θ", origin.x + 45, origin.y - 10);

        // Label (b)
        ctx.textAlign = 'center';
        ctx.fillText('(b)', origin.x, 320);

        // --- Draw Figure Caption ---
        ctx.fillText('Fig. 4.8', 350, 380);

    </script>
</body>
</html>